<template>
  <div>
    <el-row :gutter="10" class="sysImageZt">
      <el-col :span="5">
        <el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
          <el-menu-item index="1" @click="handleClick('我的收藏')">
            <i class="el-icon-star-off"></i>
            <span slot="title">我的收藏</span>
          </el-menu-item>
          <el-submenu class="submenuClass" index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>系统图库</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="dict in imageType" :key="dict.value" :index="dict.value" :label="dict.label"
                :value="dict.value" @click="handleClick(dict.value)">{{ dict.label }}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="19">
        <div>
          <el-form v-if="isHide" v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams"
            label-width="68px">
            <el-form-item label="文件名称" prop="moduleName">
              <el-input v-model="queryParams.fileName" clearable placeholder="请输入文件名称" size="small"
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" size="mini" type="cyan" @click="handleQuery">{{ $t('search')
              }}</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
              <el-button v-if="this.queryParams.moduleName != '我的收藏'" :disabled="multiple" icon="el-icon-star-off"
                size="mini" type="cyan" @click="handleCollection">收藏
              </el-button>
            </el-form-item>
          </el-form>

          <el-row :gutter="10" style="margin-bottom:10px;">
            <el-col v-if="isHide" :span="1.5">
              <el-upload ref="upload" :action="upload.uploadUrl" :before-remove="beforeRemove"
                :before-upload="beforeUpload" :file-list="upload.imageList" :headers="upload.headers" :limit="500"
                :on-exceed="handleExceed" :on-preview="handlePreview" :on-remove="handleRemove"
                :on-success="handleAvatarSuccess" :show-file-list="false" class="upload-demo" multiple>
                <el-button v-if="this.queryParams.moduleName == '我的收藏' || this.queryParams.moduleName == '我的上传'"
                  size="mini" type="primary" @click="uploadFile"><i class="el-icon-upload el-icon--right" />上传
                </el-button>
              </el-upload>
            </el-col>
            <el-col v-if="this.queryParams.moduleName == '我的收藏' || this.queryParams.moduleName == '我的上传'" :span="1.5">
              <el-button :disabled="multiple" icon="el-icon-delete" size="mini" type="danger" @click="handleDelete">删除
              </el-button>
            </el-col>
          </el-row>
          <div class="imageClass">
            <el-checkbox-group v-model="checkList" @change="radioChange">
              <el-card v-for="item in uploadList" :key="item.id" :body-style="{ padding: '5px' }" :style="boxCard">
                <el-image :preview-src-list="[baseApi + item.resourceUrl]" :src="baseApi + item.resourceUrl"
                  class="cardImage" />
                <div style="padding: 5px;text-align:left;">
                  <span style="font-size:11px;">{{ item.fileName }}</span>
                  <el-checkbox :label="item" class="selectRadioText"><span v-show="false">占位符</span></el-checkbox>
                </div>
              </el-card>
            </el-checkbox-group>
          </div>
          <Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page-size="5" :page-sizes="[24, 48, 72]"
            :page.sync="queryParams.pageNum" :total="total" @pagination="getList" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import Pagination from "@/components/Pagination";
import request from '@/utils/request';

export default {
  components: {
    Pagination
  },
  name: "Upload",
  props: {
    moduleName: String,
    message: String,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: false,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 上传信息表格数据
      uploadList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 24,
        deptIdStrs: null,
        moduleName: "我的收藏",
        fileName: "",
        moduleGuid: "云组态",
        resourceUrl: null,
        orderByColumn: "updateTime",
        isAsc: "desc"
      },
      upload: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + sessionStorage.getItem('Admin-Token-WebTopo') },
        // 上传的地址
        uploadUrl: "",
        imageList: [],
      },
      dialogVisible: false,
      baseApi: process.env.VUE_APP_BASE_API,
      imageUrl: '',
      selectionImage: {},
      isHide: true,
      isHideImage: true,
      //组态
      boxCard: {
        width: 'auto',
        height: 'auto',
        margin: '5px',
        display: 'inline-block',
      },
      selectImageRadio: null,
      imageType: [],
      defaultActive: '',
      checkList: [],
    }
  },
  created() {
  },
  mounted() {
    if (this.message != undefined) {
      this.isHide = false;
      this.isHideImage = false;
      this.isHideImage = true;
    }
    this.getImageType();
  },
  methods: {
    //获取图库类别
    getImageType() {
      let query = {}
      let url = "/system/dict/data/type/sys_image_type"
      request({
        url: url,
        method: "get",
        params: query,
      }).then((res) => {
        // console.log('图库类别',res);
        this.imageType = [];
        this.defaultActive = '';
        res.data.forEach(element => {
          if (!this.defaultActive) {
            this.defaultActive = element.dictValue;
          }
          let data = {
            label: element.dictLabel,
            value: element.dictValue
          }
          this.imageType.push(data)
        });
        this.queryParams.moduleName = this.defaultActive;
        this.getList();
      })
    },
    //收藏
    handleCollection() {
      // console.log(this.selectImageRadio);
      this.checkList.forEach(element => {
        let data = {
          moduleName: '我的收藏',
          resourceUrl: element.resourceUrl,
          fileName: element.fileName,
          moduleGuid: '云组态'
        }
        let url = "/zutai/upload"
        request({
          url: url,
          method: "post",
          data: data,
        })
      });
      this.$message('收藏成功');
      this.checkList = [];
    },
    radioChange() {
      // console.log(this.checkList);
      this.multiple = false;
    },
    handleClick(label) {
      this.queryParams.moduleName = label;
      this.multiple = true;
      this.getList();
    },
    getList() {
      this.loading = true;
      this.checkList = [];
      let url = "/zutai/upload/list"
      request({
        url: url,
        method: "get",
        params: this.queryParams,

      }).then((res) => {
        // console.log('获取成功!',res);
        if (res.code == 200) {
          this.uploadList = res.rows;
          this.total = res.total
        }
        this.loading = false;
      }).catch((error) => {
        // console.log(error)
        this.loading = false;
      })
    },
    handleChoice() {
      // this.$message('选择图标'+this.checkList);
      return this.checkList;
      //this.$parent.$parent.handleChoice(this.selectionImage);
    },
    clearChoice() {
      this.checkList = [];
    },
    /** 查询上传信息列表 */
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      if (this.queryParams.moduleName = '重置') {
        this.queryParams.moduleName = '我的收藏';
      } else {
        this.queryParams.moduleName = '';
      }
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.fileName = "";
      this.queryParams.moduleName = '重置';
      this.handleQuery();
    },
    /** 删除按钮操作 */
    handleDelete() {
      const ids = [];
      this.checkList.forEach(element => {
        ids.push(element.id)
      });
      let that = this;
      this.$confirm('是否确认删除此图标组件么？', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return that.deleImage(ids);
      })
    },
    deleImage(ids) {
      let url = "/zutai/upload/" + ids
      let that = this;
      request({
        url: url,
        method: "delete",
      }).then(() => {
        that.getList();
        that.msgSuccess("删除成功");
      })
    },
    uploadFile() {
      this.upload.uploadUrl = "/zutai/upload/uploadData" + "?isMultiple=true&moduleGuid=云组态&moduleName=" + this.queryParams.moduleName;
    },
    handleRemove(file, fileList) {
    },
    handlePreview(file) {
    },
    handleExceed(files, fileList) {
    },
    beforeUpload(file) {
      if (this.queryParams.moduleName == '') {
        this.$message({
          message: '请选择左侧上传的类型',
          type: 'warning'
        });
        this.$refs.upload.abort();
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isLt2M;
    },
    beforeRemove(file, fileList) {

    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.msgSuccess("上传成功");
        this.getList();
        this.$refs.upload.clearFiles()
      } else {
        this.msgSuccess(res.msg);
      }
    },
    msgSuccess(msg) {
      this.$message({
        message: msg,
        type: 'success'
      })
    }
  }
};
</script>
<style scoped>
.sysImageZt {
  margin-top: 20px;
}

.image {
  width: 100px;
  height: 100px;
}

.selectRadioText {
  color: #ffff;
  padding: 5px;
  float: right;
}

.submenuClass {
  height: 450px;
  overflow-y: auto;
  overflow-x: hidden;
}

.imageClass {
  height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
}

.cardImage {
  width: 80px;
  height: 70px;
}
</style>>
